<!-- 由三部分组成：结构、行为、样式 -->

<!-- 登录页组件结构 -->
<template>
  <div class="login_cont">
    <div class="login_box">
      <div class="avatar_box">
        <img src="../assets/sp_c111.gif" alt="页面logo" />
      </div>
      <!-- 表单区域 -->
      <!-- :model=""绑定变量，使用时变量.数据名 ； el-form表单验证:rules ； 获取表单实例对象需要添加 ref属性 -->
      <el-form ref="LoginFormRef" :model="LoginForm" :rules="LoginFormRules" class="log_input">
        <!-- 用户名 -->
        <!-- 表单验证el-form-item prop="变量名要与数据名相同" -->
        <el-form-item prop="inputName">
          <el-input placeholder="请输入账户" v-model="LoginForm.inputName" clearable>
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <!-- 表单验证el-form-item prop="变量名要与数据名相同" -->
        <el-form-item prop="inputPass">
          <el-input placeholder="请输入密码" v-model="LoginForm.inputPass" show-password></el-input>
        </el-form-item>
      </el-form>
      <div class="log_but">
        <el-button type="primary" @click="login">登录</el-button>
        <el-button type="info" @click="reset">重置</el-button>
      </div>
    </div>
  </div>
</template>

<!-- 行为 -->
<script>
  // 下面的{}后不能有分号
  export default {
    data() {
      return {
        // 表单的账户框和密码框绑定的数据绑定名
        LoginForm: {
          inputName: "",
          inputPass: "",
        },
        /* ------------------------- 问题 ------------------------
        表单的账户框和密码框的验证规则，验证规则变量名应和上面的数据绑定名的一样
        */
        // 表单的验证规则变量名
        LoginFormRules: {
          inputName: [{
              required: true,
              message: "请输入账户",
              trigger: "blur"
            },
            {
              min: 3,
              max: 10,
              message: '长度在 3 到 10 个字符',
              trigger: 'blur'
            }
          ],
          inputPass: [{
              required: true,
              message: "请输入密码",
              trigger: "blur"
            },
            {
              min: 6,
              max: 13,
              message: '长度在 6 到 13 个字符',
              trigger: 'blur'
            }
          ],
        },
      };
    },
    methods: {
      // validate	对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
      login() {
        // 1*因为请求返回的是Promise对象，太庞大，所以要用 await+async 简化
        this.$refs.LoginFormRef.validate(async (valid, data) => {
          // valid：是否验证通过 ； data：验证不通过的字段
          if (!valid) return;
          // 2*因为请求返回的是Promise对象，所以要用 await+async 简化

          /* ------------------------- 问题！-------------------------------
          按照视频的参数错误：const result = await this.$http.post("login",{this.LoginForm});
          查看控制台 network 没有FormData数据传过来
          直接浏览器查看输入正确和错误的分别返回什么：http://127.0.0.1:8888/api/private/v1/login?参数名=值&参数名=值
          随后发现实际问题在于直接使用的 this.this.LoginForm 对象的变量名和所需参数名不一致，随后改为 {参数名:this.LoginForm.变量名}
          */
          let result = await this.$http.post("login", { // 在main.js配置了请求根路径
            username: this.LoginForm.inputName,
            password: this.LoginForm.inputPass
          });

          let resData = result.data; // 也可以直接写成： let {data:resData} = await this.$http.post()
          
          if (resData.meta.status === 200) {
            /*
            把弹框组件需在element.js文件内挂载到了Vue的原型对象上：Vue.prototype.$message = Message
            每个组件都可以通过this访问$message中定义的方法：$message.type内的方法名
            在官网的type中为方法名，写法可为上下两种，推荐使用下面的，可携带多参数
            */
            this.$message({
              showClose: true, // x的关闭按钮
              message: '登录成功！',
              type: 'success',
              center: true // 文字居中
            });

            /* ----------------------------------------- 重点 ---------------------------------
            1、将登录成功后的token，保存到客户端的sessionStorage中
              1.1、项目除了登录接口，其他接口必须在登录后才允许访问
              1.2、token应当只在当前网站打开时生效，所以将token保存在sessionStorage中
            2、通过编程式导航跳转到后台主页，路由地址为：/home
            */

            // 1.2、：
            window.sessionStorage.setItem("token", resData.data.token);

            // 2、：编程式导航跳转到路由地址 this.$router.push()
            this.$router.push("/home");
          } else {
            this.$message.error("登录失败！"); // 弹框Message消息提示组件
          }
        });
      },


      // resetFields：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      reset() {
        // this.$refs.表单的ref名.Element的表单方法名();
        this.$refs.LoginFormRef.resetFields()
      }
    }
  };

</script>

<!-- 样式 -->
<style lang="less" scoped>
  /* scoped：样式生效区间，有只在当前组件生效，没有全局生效。单文件组件必须添加scoped，防止样式混乱
元素名后面需要空格{} */
  /* @import url("../assets/css/Login.less"); */

</style>
